:root{
    --timer: 0s
}

*{
    margin: 0;
    padding: 0;
}

body{
    background-color: #000;
    color: #666;
    /* text-align: 是作用于行盒的 */
    text-align: center;
}

audio {
    width: 500px;
    margin: 30px auto;
}


.container {
    height: 420px;
    overflow: hidden;
    overflow-y: auto;
}

.container::-webkit-scrollbar{
    display: none;
}

.lrc-list {

    display: flex;
    flex-direction: column;
    align-items: center;

    /* margin-top: -20px; */
    /* 最好不使用margin-top，因为margin-top会触发 reflow，影响性能 */
    /* transform: translateY(-30px); */

    /* transition: 只针对数值类的属性有效，比如width、height、opacity等 */
    transition: 0.6s;
    /* 去除 ::marker 伪元素*/
    list-style: none;
}

.lrc-list li{
    height: 30px;
    line-height: 30px;
    /* 让每一个li都有过渡效果 */
    transition: 0.2s;
}

.lrc-list li.active{
    /* color: #fff; */
    /* font-size 会改变元素的尺寸，会触发reflow，影响性能，为了不触发 reflow，还是使用 transform */
    transform: scale(1.4);

    background: linear-gradient(to top, rgba(255, 255, 255, 0.5) 0%, rgba(255,255,225, 0) 100%),linear-gradient(to right, #f00 var(--progress), #00f 0%);
    background-clip: text;
    /* 
        实现文字 镂空效果
        text-fill-color 是 WebKit 引入的非标准属性（需配合 -webkit- 前缀），未被纳入 CSS 官方标准。未被废弃
        -webkit-text-fill-color 需配合 -webkit-background-clip: text 使用, 且会覆盖默认 color 的颜色
    */
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    animation: erase var(--timer) linear forwards;
}


/* 将 --progress 变量定义为 CSS 自定义属性 */
@property --progress {
    /* 必须声明类型 */
    syntax: '<percentage>'; 
    /* 必须提供初始值 */
    initial-value: 0%;
    /* inherits属性的设置如何影响子元素，比如设为true时子元素会继承父元素的自定义属性值，而false则不会。*/
    inherits: false;
}

/* 定义动画效果 只对数值类的属性有效 */
@keyframes erase {
    to{
        --progress: 100%;
    }
}